<script setup lang="ts">
import type { VxeGridProps } from '@vben/plugins/src/vxe-table/types';

import type { RowType } from './designPage.data';

import { ref } from 'vue';
import { useRouter } from 'vue-router';

import { Page, useVbenModal } from '@vben/common-ui';

import { useClipboard } from '@vueuse/core';
import { message } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
  designPageDelApi,
  designPageQueryPageListApi,
} from '#/api/gen/designPage';
import { genCodeFrontEndSqlApi } from '#/api/gen/genCode';
import { useDictionaries } from '#/utils';
import DesignPageFormModel from '#/views/onlineDesign/designPage/modules/DesignPageFormModel.vue';

const { translateValue } = useDictionaries([
  'online_page_type',
  'online_page_layout',
]);
const { copy } = useClipboard({ legacy: true });
const router = useRouter();
const preSql = ref();

const gridOptions: VxeGridProps<RowType> = {
  height: 'auto',
  toolbarConfig: {
    slots: {
      buttons: 'toolbar-buttons',
    },
  },
  columns: [
    { align: 'left', type: 'checkbox', width: 50 },
    { title: '序号', type: 'seq', width: 50 },
    {
      title: '页面类型',
      field: 'pageType',
      cellRender: {
        name: 'CellDict',
        attrs: {
          dictCode: 'online_page_type',
          translateValue,
        },
      },
    },
    {
      title: '布局',
      field: 'layout',
      cellRender: {
        name: 'CellDict',
        attrs: {
          dictCode: 'online_page_layout',
          translateValue,
        },
      },
    },
    { title: '主模型', field: 'mainModel' },
    {
      field: 'action',
      fixed: 'right',
      slots: { default: 'action' },
      title: '操作',
      width: 260,
    },
  ],
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        return await designPageQueryPageListApi({
          pageNo: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
      },
    },
  },
};
const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });

const [PageFormModal, pageFormModalApi] = useVbenModal({
  connectedComponent: DesignPageFormModel,
  onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      gridApi.query();
    }
  },
});
const [PreviewCodeModal, previewCodeModalApi] = useVbenModal({
  title: 'SQL预览',
  onConfirm: () => previewCodeModalApi.close(),
  showCancelButton: false,
});

function openPageForm(id) {
  pageFormModalApi.setData({
    id,
  });
  pageFormModalApi.open();
}
async function delRow(row) {
  const msg = await designPageDelApi(row.id);
  message.success(msg);
  await gridApi.query();
}
// 需要的目标模板页面
async function configuration(row) {
  let pathName;
  if (row.layout === 'table') {
    pathName = 'table/:data';
  } else if (row.layout === 'treeTable') {
    pathName = 'treeTable/:data';
  } else {
    pathName = 'colTable/:data';
  }
  await router.push({
    name: pathName,
    params: { data: `${row.mainModel}-${row.id}` },
  });
}
// 生成菜单
async function genMenu(row) {
  // Modal.confirm({
  //   title: '系统提示?',
  //   content: createVNode('div', { style: 'color:red;' }, '确认生成菜单吗?'),
  //   async onOk() {
  //     const msg = await permissionGenMenuItemApi({ pageId: row.id });
  //     message.success(msg);
  //   },
  //   class: 'test',
  // });
  preSql.value = await genCodeFrontEndSqlApi(row.id);
  previewCodeModalApi.open();
}
</script>

<template>
  <Page auto-content-height>
    <PageFormModal class="w-[40%]" />
    <PreviewCodeModal class="w-[70%]">
      <a-button style="float: right" type="link" @click="copy(preSql)">
        复制
      </a-button>
      <pre v-if="preSql">{{ preSql }}</pre>
    </PreviewCodeModal>
    <Grid>
      <template #toolbar-buttons>
        <a-button class="mr-2" type="primary" @click="openPageForm()">
          设计页面
        </a-button>
      </template>
      <template #action="{ row }">
        <a-button size="small" type="link" @click="configuration(row)">
          配置
        </a-button>
        <a-button
          v-if="row.genSql === 0"
          size="small"
          type="link"
          @click="genMenu(row)"
        >
          菜单SQL
        </a-button>
        <a-button size="small" type="link" @click="openPageForm(row.id)">
          编辑
        </a-button>
        <a-popconfirm
          cancel-text="再想想"
          title="您确定要删除吗?"
          @confirm="delRow(row)"
        >
          <a-button size="small" type="link" danger> 删除 </a-button>
        </a-popconfirm>
      </template>
    </Grid>
  </Page>
</template>
